<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>任务中心</title>
<link href="../css/base.css" type="text/css" rel="stylesheet">
<link href="../css/indentInfo.css" type="text/css" rel="stylesheet">
<link href="../css/indentMission.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.js"></script>
</head>

<body class="">


<header>
	<h1 class="p10 bgwhite"><a href="#"><i class="goback"></i>新手任务</a></h1>
</header>

<div class="Integral pb40">

    
    <div class="Integral-list2">
        <ul>
            <li>
                <a href="#">
				<span class="qd"></span>
				<div class="content_list2">
                <h3>签到</h3>
				<p>首次签到获得100积分</p>				
				</div>
				<i></i>
                </a>
            </li>
            <li class='done'><!--增加class='done'，使后面按钮变灰 -->
                <a href="#">
				<span class="yd"></span>
				<div class="content_list2">
                <h3>阅读</h3>
				<p>阅读品牌故事获得100积分</p>				
				</div>
				<i></i>				
                </a>
            </li>
            <li class='done'><!--增加class='done'，使后面按钮变灰 -->
                <a href="#">
				<span class="ty"></span>
				<div class="content_list2">
                <h3>体验</h3>
				<p>首次购买商品获得100积分</p>				
				</div>
				<i></i>				
                </a>
            </li>
            <li>
                <a href="#">
				<span class="tj"></span>
				<div class="content_list2">
                <h3>推荐</h3>
				<p>招募新代言人获得100积分</p>				
				</div>
				<i></i>				
                </a>
            </li>          
        </ul>
		<p class='center'>
		<span class="red">*轻松完成任务，换取10元话费</span>
		</p>
    </div>
 
   
</div><!--content-->



<footer class="footers footers4">
     <ul class="clear">
         <li><a href="成为分销商.html"><i class="fxs"></i><p>成为分销商</p></a></li>
         <li><a href="首页.html"><i class="home"></i><p>店铺首页</p></a></li>
         <li><a href="我的订单.html"><i class="dgdan"></i><p>我的订单</p></a></li>
         <li class="current"><a href="任务中心.html"><i class="renwu"><span class="num bgred">3</span></i><p>任务中心</p></a></li>
     </ul>
</footer>

<div id="indentMission_frame">
<div class="wrap_10">
	<div id="indentMission_dialog">
	   <div class="Integral-list2">
	   <h3>新手任务</h3>
	   <a class="close"></a>
			<ul>
				<li>
					<a href="#">
					<span class="qd"></span>
					<div class="content_list2">
					<h3>签到</h3>
					<p>首次签到获得100积分</p>				
					</div>
					<i></i>
					</a>
				</li>
				<li class='done'><!--增加class='done'，使后面按钮变灰 -->
					<a href="#">
					<span class="yd"></span>
					<div class="content_list2">
					<h3>阅读</h3>
					<p>阅读品牌故事获得100积分</p>				
					</div>
					<i></i>				
					</a>
				</li>
				<li class='done'><!--增加class='done'，使后面按钮变灰 -->
					<a href="#">
					<span class="ty"></span>
					<div class="content_list2">
					<h3>体验</h3>
					<p>首次购买商品获得100积分</p>				
					</div>
					<i></i>				
					</a>
				</li>
				<li>
					<a href="#">
					<span class="tj"></span>
					<div class="content_list2">
					<h3>推荐</h3>
					<p>招募新代言人获得100积分</p>				
					</div>
					<i></i>				
					</a>
				</li>          
			</ul>
			<div class="bottom">
			<span>*轻松完成任务，换取10元话费</span>
			<div class='igno'>
			<input id='igno_input' type="checkbox" />
			不再提示</div>
			</div>
		</div>
	</div>
</div>

</div>



<script type="text/javascript">
$(function(){
 $('.igno').bind('click',function(){//点击文字触发checkbox选择
	$('#igno_input').prop('checked') ? $('#igno_input').prop('checked',false) : $('#igno_input').prop('checked',true)
 });
 $('#igno_input').bind('click',function(evt){ //阻止checkbox事件冒泡到父igno节点
	evt ? evt.stopPropagation() : window.event.cancelBubble = true
 }); 
 var indentMission = function(){
	 $('#indentMission_frame').width($(window).width());
	 $('#indentMission_dialog').width($(window).width()-20); 
 }
 showindentMission = function(){ //显示遮罩
     $('#indentMission_frame').fadeIn(100)
 }
 hideindentMission = function(){//隐藏遮罩
     $('#indentMission_frame').fadeOut(50)
 }
 $('.close').bind('click',function(evt){ 
	hideindentMission()
 }); 
 showindentMission()
 indentMission();
 var resizeTimer = null;
 window.onresize=function(){
		if (resizeTimer) {
		clearTimeout(resizeTimer)
		}
		resizeTimer = setTimeout(function(){
		   indentMission();
		}, 400);
  }

  
})

</script>

</body>
</html>
